<template>
    <view
        class="home-top"
        :style="{
            backgroundPositionY: positionY,
            backgroundImage: 'url(' + styleBgImage + ')',
            backgroundColor: pageData.info.style_color,
        }"
    >
        <search />
        <banner
            :list="pageData.banner.list"
            :style="pageData.banner.style"
            class="mr-2 ml-2"
        />
    </view>
    <view class="bg-white mt-2">
        <homeNav :list="pageData.nav.list" :style="pageData.nav.style" />
    </view>
    <view class="bg-white mt-2 mb-4">
        <cardTitle text="资讯列表" link="/pages/cms/article_list" />
        <view v-for="item in pageData.cms.list" :key="item.id">
            <articleItem :item="item" :id="item.id"></articleItem>
        </view>
    </view>
    <view class="mt-2 mb-4 text-center record-text" v-if="pageData.record.icp">
        {{ pageData.record.icp }}
    </view>
    <tabbar></tabbar>
</template>

<script setup lang="ts">
import { reactive, computed, onMounted } from "vue";
import { homeData, homeStyle } from "@/api/home";
import useConfigStore from "@/stores/config";

const pageData = reactive({
    banner: {
        list: [],
        style: {},
    },
    nav: {
        list: [],
        style: {},
    },
    cms: {
        list: [],
    },
    info: {
        style_identify: "",
        style_color: "",
    },
    record:{
        icp: '',
        icp_url:'',
    }
});

const positionY = computed(() => {
    return pageData.banner.style["height"] - 75 + "px";
});

const styleBgImage = computed(() => {
    const modules:any = import.meta.glob('/src/static/home_top_*.png', { eager: true });
    // new URL( "/static/home_top_" + pageData.info.style_identify + ".png", import.meta.url).href
    return pageData.info.style_identify ? modules['/src/static/home_top_' + pageData.info.style_identify + '.png'].default : "none";
});

const getHomeData = async () => {
    const res = await homeData();
    pageData.cms.list = res.cms;
};

const getHomeStyle = async () => {
    const res = await homeStyle();
    pageData.banner = res.banner;
    pageData.nav = res.nav;
    pageData.info = res.info;
};

getHomeData();
getHomeStyle();

onMounted(() => {
    pageData.record = useConfigStore().sysConfig.record;
})
</script>

<style lang="scss" scoped>
.home-top {
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: 94px;
    padding-bottom: 30rpx;
    z-index: 0;
}
.record-text {
    color: #909399;
    font-size: 13px;
}
</style>
